<template>
    <header>
        <div class="collapse bg-dark" id="navbarHeader">
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 col-md-7 py-4">
                        <h4 class="text-white">About Course Album</h4>
                        <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
                    </div>
                    <div class="col-sm-4 offset-md-1 py-4">
                        <h4 class="text-white">Contact</h4>
                        <ul class="list-unstyled">
                            <li><a href="javascript:void(0);" class="text-white">Follow on Twitter</a></li>
                            <li><a href="javascript:void(0);" class="text-white">Like on Facebook</a></li>
                            <li><a href="javascript:void(0);" class="text-white">Email me</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="navbar navbar-dark bg-dark shadow-sm">
            <div class="container d-flex justify-content-between">
                <router-link to="/index" class="navbar-brand d-flex align-items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2" viewBox="0 0 24 24" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
                    <strong>Course Album</strong>
                </router-link>

                <nav class="navbar navbar-expand-lg bg-dark navbar-light bg-light">
                    <router-link to="/all/course" class="navbar-brand" href="javascript:void(0);">All Course</router-link>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="javascript:void(0);">Home <span class="sr-only">(current)</span></a>
                            </li>

                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="javascript:void(0);" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    More
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="javascript:void(0);">Action</a>
                                    <a class="dropdown-item" href="javascript:void(0);">Another action</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="javascript:void(0);">Something else here</a>
                                </div>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0);">

                                </a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link disabled" href="javascript:void(0);" tabindex="-1" aria-disabled="true">
                                    search
                                </a>
                            </li>
                        </ul>
                        <form class="form-inline my-2 my-lg-0">
                            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                                </svg>
                            </button>
                        </form>

                    </div>
                </nav>

                <div>
                    <div v-if="!loginMember || !loginMember.id" v-on:click="openLoginModal()" class="dropdown"><!--btn-secondary-->
                        <a class="btn btn-write" href="javascript:void(0);" role="button">
                            Login
                        </a>
                    </div>
                    <div v-if="loginM()"
                         v-on:mouseleave="profilePhotoLeave()"
                         v-on:mouseenter="profilePhotoEnter()"
                         v-bind:class="profilePhotoDropdown.dropdown"><!--btn-secondary-->
                        <a v-bind:aria-expanded="profilePhotoDropdown.boole"
                           class="btn padding-3 border-color-not dropdown-toggle"
                           href="javascript:void(0);"
                           role="button"
                           id="dropdownMenuLink"
                           data-toggle="dropdown"
                           aria-haspopup="true">
                            <img id="id-nav-user-photo" v-bind:class="returnCss()" v-bind:src="loginMember.photo" v-bind:alt="loginMember.name"/>
                        </a>

                        <div v-bind:class="profilePhotoDropdown.dropdownMenu"
                             aria-labelledby="dropdownMenuLink">
                            <a class="dropdown-item" href="javascript:void(0);">Action</a>
                            <a class="dropdown-item" href="javascript:void(0);">Another action</a>
                            <a v-on:click="logout()" class="dropdown-item" href="javascript:void(0);">安全退出</a>
                        </div>
                    </div>
                </div>

                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

            </div>
        </div>

        <the-login ref="theLogin"></the-login>

    </header>
</template>

<script>
    import TheLogin from "./theLogin";
    export default {
        name: 'theHeader',
        components: {TheLogin},
        data: function () {
            return {
                loginMember: {},
                profilePhotoDropdown: {
                    "dropdown":"dropdown",
                    "dropdownMenu":"dropdown-menu margin-top-0",
                    "boole":false,
                },
            }
        },
        mounted() {
            let _this = this;
            _this.getLoginMember();//从会话缓存中获取登录的用户信息。
        },
        methods: {

            /**
             * 解决v-if报loginMember为空的bug
             * */
            loginM: function () {
                let _this = this;
                if (Tool.isEmpty(_this.loginMember)||Tool.isEmpty(_this.loginMember.id)) {
                    return false
                }
                return true;
            },

            /**
             * 退出登录状态
             * */
            logout () {
                let _this = this;
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/business/album/member/logout/' + _this.loginMember.token).then((response)=>{
                    let resp = response.data;
                    if (resp.success) {
                        SessionStorage.remove(_this.loginMember.id);
                        SessionStorage.remove(SESSION_KEY_LOGIN_USER);
                        _this.loginMember = {};
                        console.log('退出登录成功');
                        // if (_this.$route.path == "/index") {
                            // JS 原生刷新页面方法：window.location.reload();
                            // 利用路由刷新的方法：this.$router.go(0);
                        setTimeout(function () {
                            _this.$router.go(0);
                        },1000);
                        // } else {
                        //     _this.$router.push("/index");
                        // }
                    } else {
                        Toast.warning(resp.message);
                    }
                });
            },

            /**
             * 用户无头像时显示name的样式
             * */
            returnCss: function () {
                let _this = this;
                if (!_this.loginMember||!_this.loginMember.photo) {
                    return "nav-user-photo-not-border";
                } else {
                    return "nav-user-photo";
                }
            },

            /**
             * 从会话缓存获取登录的用户信息，此函数由子组件theLogin.vue触发。
             * */
            setLoginMember(loginMember) {
                let _this = this;
                _this.loginMember = loginMember;
                //将theLogin.vue传来的用户信息进行保存
                /**保存的方式有多种：
                 * HTML5本地缓存--localStorage：关闭页面后，信息还在，并没有被清空，适合安全的内网环境。
                 * 会话缓存--sessionStorage：页面刷新的时候信息不会丢失，关闭页面后，信息自动清空，适合用来存储登录信息
                 * js的全局变量：页面刷新时，信息会丢失
                 * vue的store：页面刷新时，信息会丢失
                 */
                //这里推荐使用sessionStorage会话缓存
                Tool.setLoginUser(loginMember);

                if (!_this.loginMember || !_this.loginMember.id) {
                    return;
                }
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/album/memberCourse/get-enroll', {
                    memberId: _this.loginMember.id,
                }).then((response)=>{
                    let resp = response.data;
                    if (resp.success) {
                        SessionStorage.set(_this.loginMember.id, resp.content);
                    }
                });
                // 延迟刷新，待缓存设置完成后再刷新页面，避免设置缓存的过程被刷新打断
                setTimeout(function () {
                    // 刷新页面重新加载登录后页面信息
                    window.location.reload();
                },1000);
            },

            /**
             * 页面初始化时需要获取登录的用户信息。初始化时mounted触发。
             * */
            getLoginMember: function () {
                let _this = this;
                _this.loginMember = Tool.getLoginUser();
            },

            /**
             * 打开登录注册窗口
             */
            openLoginModal() {
                let _this = this;
                _this.$refs.theLogin.openLoginModal();
                _this.loginStatus = _this.$refs.theLogin.loginStatus;
            },

            // ---------------登录完成后头像鼠标经过事件----------------

            /**
             * 鼠标移入事件
             */
            profilePhotoEnter: function () {
                let _this = this;
                _this.profilePhotoDropdown.dropdown = "dropdown show";
                _this.profilePhotoDropdown.dropdownMenu = "dropdown-menu margin-top-0 show";
                _this.profilePhotoDropdown.boole = true;
            },

            /**
             * 鼠标移出事件
             */
            profilePhotoLeave: function () {
                let _this = this;
                setTimeout(function () {
                    _this.profilePhotoDropdown.dropdown = "dropdown";
                    _this.profilePhotoDropdown.dropdownMenu = "dropdown-menu margin-top-0";
                    _this.profilePhotoDropdown.boole = false;
                },800);
            },

        },
    }
</script>

<style scoped>
    .btn-write {
        color: #fff;
        border-color: #6c757d;
    }

    .margin-top-0{
        margin-top: -0.1rem;
    }

    .border-color-not {
        color: #fff;
    }

    .nav-user-photo {
        position: relative;
        top: -10%;
        margin-right: 8px;
        border-radius: 100%;
        border: 2px solid #FFF;
        width: 55%;
        vertical-align: middle;
    }

    .nav-user-photo-not-border {
        position: relative;
        top: -10%;
        margin-right: 8px;
        border-radius: 100%;
        width: 55%;
        vertical-align: middle;
    }

    .padding-3{
        padding:3px;
    }
</style>